<template>
	<view class="flex column align-center">
		<view class="wrap-white-bg">
			<view class="wrap-item">
				<view class="title-bg f-30 flex">
					<view class="title">充值金额</view>
				</view>

				<view class="m-t-30 flex align-center">
					<view class="f-60">¥</view>

					<input class="input f-100" placeholder-class="place" type="digit" maxlength="8" v-model="money" />
				</view>
				
				<view class="total-price m-t-30 flex align-center" v-if="money !== ''">
					需要支付的金额:{{ (parseFloat(money) * parseFloat($stoarge.getConfigData().wxpay_discount) / 100.00).toFixed(2) }}
				</view>
			</view>
		</view>

		<view class="sure-btn theme-gradient-btn f-34" @click="onRecharge">充值</view>
	</view>
</template>

<script>
	import { recharge } from "@/API/wallet.js";
	export default {
		data() {
			return {
				money: "",
			};
		},
		onLoad() {},
		methods: {
			/**
			 * 充值
			 */
			onRecharge() {
				if (this.money === "") {
					this.$st.show("请输入充值金额");
					return;
				}
				this.$throttle(() => {
					wx.login({
						success: (loginRes) => {
							this.onRechargeData(loginRes.code);
						}
					});
				})
			},
			/**
			 * 充值
			 */
			onRechargeData(code) {
				recharge(code, this.money).then((res) => {
					this.$filters.onPayFunction(res.data, (res) => {
						if (res === 1) {
							this.paySuccess();
						}
					});
				})
			},
			/**
			 * 支付成功
			 */
			paySuccess() {
				this.$jump.paySuccess("recharge");
			},
		},
	};
</script>

<style scoped>
	@import "@/css/publish.css";

	.wrap-white-bg {
		border-radius: 0rpx;
	}

	.wrap-item {
		border-bottom: none;
	}

	.input {
		margin-left: 20rpx;
		min-height: 100rpx;
	}
	
	.total-price {
		color: #999999;
	}
</style>
